<template>
	<view class='issue'>
		<!-- 头部信息 -->
		<view class="issue-head">
			<slot name="headPic"></slot>
			<text v-if="headTitleShow" class="issue-head-title">{{headTitleValue.slice(0,5)}}</text>
			
			<view class="issue-head-star-box" v-if="starsShow">
				<image v-for="(item,index) in starsMax" :key="index" :src="(index+1)>formatScore?starDefault:starActive" :class="formatScore==index+1?'active':''" mode="" @click="setScore(index+1)"></image>
			</view>
			
			<text class="un-ping">请选择商品评分</text>
		</view>
		<view class="issue-boby">
			<textarea maxlength="500" v-if="textareaShow" @blur="blur" :value="infoReceive.textareaValue" :placeholder="textareaPlaceholder" @input="conInput"/>
			<view class="un-em">
				<view >{{tatVal}}</view><view >/500</view>
			</view>
		</view>
		 
		
		<!-- 匿名 -->
		 <view class="issue-bottom">
		 	<slot name="bottomPic"></slot>
		 	<text  class="issue-bottom-title">{{bottomTitleValue.slice(0,5)}}</text>
			<switch :checked="flag" @change="switch1Change" class="issue-bottom-check" color="#E02E24" style="transform:scale(0.8)  " />
			<view class="issue-bottom-text">
				<text class="" >上传图片(最多3张)</text>
			</view>
			 
		 </view>
		
		 
		 <view class="un-image-section">
		 	<view class="block" v-for="(image,index) in imageSrc" :key="index" >
		 			<view class="yticon icon-iconfontshanchu1 un-shan" @click="deleteCartItem(index)" > </view>
		 			<image  class="image" :src="image" :data-src="image" @tap="previewImage"></image>
		 	</view>
		 	
		 	<image src="/static/jia.png"  class="image1 " @click="chooseImage"></image>
		 </view>
		
		 <view class="issue-btn-box">
		 	<button v-if="submitShow" class="submit-btn" type="primary" @click="doSubmit">{{submitText}}</button>
			<slot name="submit"></slot>
		 </view>
	</view>
</template>
<script>
	export default {
		props:{
			headPicShow:{ //图片
				type:[String,Boolean],
				default:true,
			},
			headPicValue:{
				type:String,
				default:require('@/static/st_pic.png')
			},
			
			headTitleShow:{ //标题
				type:[String,Boolean],
				default:true,
			},
			headTitleValue:{
				type:String,
				default:"商品评分"
			},
			bottomTitleValue:{
				type:String,
				default:"匿名评价"
			},
			
			starsShow:{
				type:[String,Boolean],
				default:true,
			},
			starsMax:{ // 星星最大个数
				type:[String,Number],
				default:5,
			},
			starDefault:{ //未选中
				type:String,
				default:require('@/static/st_star.png'),
			},
			starActive:{
				type:String,
				default:require('@/static/st_star_active.png'),
			},
			score:{  //默认分数
				type:[Number,String],
				default:0
			},
			starsDisabled:{ //是否禁用star
				type:[Boolean],
				default:false
			},
			
			textareaShow:{ // 多行文本显示
				type:[String,Boolean],
				default:true,
			},
			textareaPlaceholder:{
				type:[String],
				default:"宝贝是否满足了你的期待？说说你的使用心得，分享给其它想购买的朋友吧。"
			},
			
			
			submitShow:{ // 发布按钮
				type:[String,Boolean],
				default:false,
			},
			submitText:{
				type:String,
				default:"提交",
			},
			
			infoReceive:{ // 获取值
				type:Object,
				default:function(){
					return {
						score:0,
						textareaValue:""
					}
				}
			}
		},
		data() {
			return {
				contenttt:'',
				tatVal: 0,
				imageSrc: [],
				flag:false,
			}
		},
		onUnload() {
			this.imageSrc = [];
		},
		computed:{
			formatScore(){
				return this.infoReceive.score
			}
		},
		methods: {
			switch1Change(){
				this.flag = !this.flag;
				this.$emit("flag",this.flag)
			},
			//删除
			deleteCartItem(index){
				let list = this.imageSrc;
				let row = list[index];
				let id = row.id;
				this.imageSrc.splice(index, 1);
				uni.showToast({
					title: '删除成功',
					icon: 'success',
					duration: 1000
				})
			},
			/**
			 * 预览图片
			 */
			previewImage: function(e) {
				console.log("666",e)
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.imageSrc
				})
			},
			/**
			 * 上传图片
			 */
			chooseImage: function() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						console.log('chooseImage success, temp path is', res.tempFilePaths[0])
						var imageSrc = res.tempFilePaths[0]
						if (this.imageSrc.length < 3 ){
							this.imageSrc.push(imageSrc);
							this.$emit("imageSrc",this.imageSrc)
							uni.showToast({
							title: '上传成功',
							icon: 'success',
							duration: 1000
							})
						}else{
							uni.showToast({
								title: '超出最大数目',
								icon: 'none',
								duration: 1000
							})
							}
						
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
					}
				})
			},
			/**
			 * @name 设置分数
			 */
			setScore(score){
				if(this.starsDisabled!==false)return
				if(this.infoReceive.score!=score){
					this.infoReceive.score=score
				}else{
					score = 0
					this.infoReceive.score=0
				}
				
				this.$emit("scoreChange",score)
			},
			/**
			 * @name 限制textarea输入字数
			 */
			conInput(e){
				this.tatVal=e.detail.value.length;
				if(this.tatVal===500){
					uni.showToast({
						icon:'none',
						title:'最多只能输入500个字'
					})
				}
				this.$emit("inputs",e.detail.value)
			},
			/**
			 * @name 获取textarea内容
			 */
			
			blur(e){
				this.infoReceive.textareaValue=e.detail.value
			},
			
			
			
			
			/**
			 *  提交
			 */
			doSubmit(){
				this.$emit('submitt',this.infoReceive)
				
			}
		},
		created() {
			this.infoReceive.score=this.score
		}
	}
</script>
<style lang='scss'>
	$backgroundC:#f9f9f9;
	$borderColor:#f5f5f5;
	$white:#ffffff;
	$fontSize:28upx;
	.issue {
		background-color: $backgroundC;
		padding: 20upx 40upx;
		/* padding-bottom: 375upx; */
		&-head{
			
			background-color: $white;
			height: 100upx;
			border-top: 1upx solid $borderColor;
			border-bottom: 1upx solid $borderColor;
			padding: 0 25upx;
			
			/* &-pic{
				width: 70upx;
				height: 70upx;
				border-radius: 50%;
				vertical-align: middle;
				margin-right: 17upx;
			} */
			&-title{
				line-height: 100upx;
				font-size: 30upx;
				vertical-align: middle;
				margin-right: 35upx;
			}
			
			&-star-box{
				display: inline-block;
				
				image{
					width: 32upx;
					height: 32upx;
					vertical-align: middle;
					margin-right: 14upx;
				}
				image.active{
					animation: star_move ease-in 1 1s,star_rotate ease 1.5s infinite 1s;
				}
			}
			.un-ping{
				font-size: 28upx;
				color: #999999;
			}
		}
		&-bottom{
			margin-top: 20upx;
			background-color: $white;
			height: 100upx;
			border-top: 1upx solid $borderColor;
			border-bottom: 1upx solid $borderColor;
			padding: 0 25upx;
			
			
			&-title{
				line-height: 100upx;
				font-size: 30upx;
				vertical-align: middle;
				margin-right: 35upx;
			}
			
			&-check{
				padding-left: 400upx;
				width: 100upx;
			}
			&-text{
				padding-top: 10upx;
				font-size: $fontSize;
				color: #9D9D9D;
			}
			
		}
		.issue-boby{
			position: relative;
		}
		textarea{
			margin-top: 20upx;
			width: 100%;
			height: 320upx;
			background-color: $white;
			font-size: $fontSize;
			color: #898989;
			padding: 24upx 24upx 60upx;
			box-sizing: border-box;
			line-height: 40upx;
			border: 1upx solid #E4E4E4;
		}
		.un-em{
			position: absolute;
			display: flex;
			z-index: 1;
			bottom: 30upx;
			right: 50upx;
			font-size: 24upx;
			color: #999999;
		}
		&-btn-box{
			padding: 64upx 30upx;
			button{
				width: 100%;
				height: 80upx;
				border-radius: 80upx;
				font-size: $fontSize;
				background-color: #E02E24;
				line-height: 80upx
			}
		}
		&-upload{
			
			margin-top: 60upx;
			/* border: 1px solid #9d9d9d; */
			.uni-padding-wrap{
				display: flex;
				flex-wrap: wrap; 
				.image {
					
					display: flex;
					width: 30%;
					height: 200upx;
					margin: 10upx;
					border: 2upx solid #9D9D9D;
				}
				/* //消息提示角标 */
				.checkbox{
					position:absolute;
					width:4.5vw;
					height:4.5vw;
					background-color:#9D9D9D;
					top:101vw;
					right:68vw;
					border-radius:100%;
					font-size:20upx;color:#fff;
					display:flex;
					align-items: center;
					justify-content: center;
					z-index: 10;
					}
			}
			
			
			
			.demo {
				background: #FFF;
				padding: 50upx;
			}
		}
		
		.un-image-section{
			display: flex;
			flex-wrap: wrap;
			margin-top: 50upx;
			.image {
				
				display: flex;
				width: 100%;
				height: 180upx;
				margin: 0upx;
				border: 2upx solid #9D9D9D;
				
			}
			
			.block{
				position: relative;
				width: 30%;
				margin: 10upx;
				.un-shan{
					position: absolute;
					top: 20upx;
					right: 20upx;
					z-index: 1;
				}
			}
			.image1{
				display: flex;
				width: 30%;
				height: 180upx;
				margin: 10upx;
				border: 2upx solid #CCCCCC;
				
			}
			
		}
		
	}
	
	@keyframes star_move{
		from{
			width: 50upx;
			height: 50upx;
			transform: rotate(180deg)
		}
		to{
			width: 32upx;
			height: 32upx;
			transform: rotate(0)
		}
	}
	@keyframes star_rotate{
		0%{
			transform: rotateY(360deg)
		}
		100%{
			transform: rotateY(180deg)
		}
	}
</style>
